<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入css重置样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入页面css样式 -->
    <link rel="stylesheet" href="./css/home.css">
    <!-- 引入swiper -->
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
</head>

<body>

    <!-- 头部 -->
    <div id="header">
        <img src="./images/优选.png" alt="优选" class="h_logo">
        <div class="h_title">
            <h3>熊猫优选</h3>
            <span>XIONG MAO YOU XUAN</span>
        </div>
        <div class="h_search">
            <img src="./images/搜索.png" alt="">
            <input type="text" placeholder="搜索商品，发现更多优惠">
            <button>搜索</button>
        </div>
        <div class="info">
            <a href="">
                <img src="./images/全程包邮.png" alt="全程包邮">
                <p>全程包邮</p>
            </a>
            <a href="">
                <img src="./images/7天退换.png" alt="7天退换">
                <p>7天退换</p>
            </a>
            <a href="">
                <img src="./images/品质保证.png" alt="品质保证">
                <p>品质保证</p>
            </a>
        </div>
        <div>
            <button class="logout">注销</button>
            <p class="userinfo"></p>
        </div>
    </div>
    <!-- 导航 -->
    <div id="nav">
        <ul class="top">
            <!-- 导航栏 -->
            <li><a href="">首页</a>
                <!-- 下拉菜单 -->
                <ul class="top_in">
                    <li><span></span><a href="">女装/女鞋</a></li>
                    <li><a href="">男装/</a><a href="">男鞋</a></li>
                    <li><a href="">美妆/</a><a href="">个护</a></li>
                    <li><a href="">配饰/</a><a href="">箱包</a></li>
                    <li><a href="">零食王国</a></li>
                    <li><a href="">母婴用品</a></li>
                    <li><a href="">手机/</a><a href="">数码</a></li>
                    <li><a href="">内衣袜子</a></li>
                    <li><a href="">文娱/</a><a href="">家居</a></li>
                </ul>
            </li>
            <li><a href="">超值大额卷</a></li>
            <li><a href="">男女穿搭</a></li>
            <li><a href="">最新动态</a></li>
        </ul>
    </div>
    <!-- 主体 -->
    <div id="main">
        <div class="container">
            <!-- 轮播 -->
            <div class="box">
                <!-- 主页介绍 -->
                <div class="maininfo">
                    <img src="./images/首页.png" alt="首页介绍">
                </div>
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="./images/1.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./images/2.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./images/3.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./images/4.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./images/5.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./images/6.jpg" alt=""></div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>

                    <!-- 如果需要滚动条 -->
                    <div class="swiper-scrollbar"></div>
                </div>
                <div class="ban_right">
                    <img src="./images/9.png" alt="9块9包邮">
                </div>
            </div>
            <!-- 夏季女装、超值大额卷、扫码下载APP -->
            <div class="views">
                <div class="one"><a href=""><img src="./images/newshoe.jpg" alt="夏季女装"></a></div>
                <div class="two"><a href=""><img src="./images/big.jpg" alt="超值大额卷"></a></div>
                <div class="three"><a href=""><img src="./images/loadapp.jpg" alt="扫码下载APP"></a></div>
            </div>
            <!-- 小编精选、每天更新 -->
            <div class="selectviews">
                <a href="">小编精选</a>
                <a href="">每天更新</a>
            </div>
            <div class="back">
                <a href="javascript:void(0)">回到顶部</a>
            </div>
            <!-- 商品列表 -->
            <div class="productlist">

            </div>
            <!-- 查看更多 -->
            <div class="moreview">查看更多</div>
        </div>
    </div>
    <!-- 页脚 -->
    <div id="footer">
        <div class="top">
            <img src="./images/优选.png" alt="熊猫优选">
            <div>
                <p>熊猫优选</p>
                <p>年轻人网购首选购物领劵更省钱</p>
            </div>
            <a href="">下载APP</a>
        </div>
        <p class="secure_title">浙公安网备案33010602009949号 | ICP备案号:浙ICP备17012864号-1 | 证照信息
        </p>
    </div>

    <!-- 引入轮播js样式 -->
    <script src="./swiper/swiper-bundle.min.js"></script>
    <script src="./js/swiper.js"></script>

    <script src="./lib/axios.min.js"></script>
    <script src="./js/request.js"></script>
    <script src="./lib/js.cookie.js"></script>

    <!-- 引入页面js样式 -->
    <script src="./js/home.js"></script>
    <script>
        onLogout()
        showUserInfo()
        // bindMenuList()
        // showDetail()
    </script>

</body>

</html>